<div class="field-wrapper" [zeprideAuthority]="zeprideAuthorityData">
  <label class="label">{{componentData.labelText}}</label>
  <ng-container *ngIf="!componentData.disabled;else disabledTpl">

    <div class="cl-form-content">
      <div nz-row class="cl-form-row" *ngFor="let row of rows">
        <ng-container *ngFor="let item of row; let last = last">
          <div nz-col nzSpan="4" class="cl-label cl-cell" *ngIf="item.name">{{item.name}}</div>
          <div nz-col [nzSpan]="getCellSpan(last, row.length, item.name, item)" class="cl-cell">
            <zepride-cell-tmp style="width: 100%;" [parentBindField]="componentData.bindField"
              [tmpComItemId]="item.tmpComItemId" [componentData]="item.component"
              [disabled]="!editable" [invalid]="componentData.invalid" [tplInvalid]="componentData.tplInvalid">
            </zepride-cell-tmp>
          </div>
        </ng-container>
      </div>
    </div>

  </ng-container>
</div>

<ng-template #disabledTpl>
  <div class="cl-form-content">
    <div nz-row class="cl-form-row" *ngFor="let row of rows; let index= index">
      <ng-container *ngFor="let item of row; let last = last">
        <div nz-col nzSpan="4" class="cl-label cl-cell" *ngIf="item.name">{{item.name}}</div>
        <div nz-col [nzSpan]="getCellSpan(last, row.length, item.name, item)" class="cl-cell">
          <ng-container *ngIf="item.component.selector != 'auto-form' ">
            {{
              (dataModel && dataModel[componentData.bindField] && dataModel[componentData.bindField][index]) ?
              dataModel[componentData.bindField][index][item.sourceBindField] :
              ''
              }}
          </ng-container>
          <ng-container *ngIf="item.component.selector == 'auto-form' ">
            <table class="auto-table">
              <thead>
                <tr class="header">
                  <th nzAlign="center" class="header-cell" *ngFor="let key of getObjectKeys(dataModel[componentData.bindField+'['+ index +'].' + item.sourceBindField])">{{key}}</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let value of dataModel[componentData.bindField+'['+ index +'].' + item.sourceBindField]">
                  <td class="column-cell" nzAlign="center" *ngFor="let key of getObjectKeys(dataModel[componentData.bindField+'['+ index +'].' + item.sourceBindField])">{{value[key]}}</td>
                </tr>
              </tbody>
            </table>

          </ng-container>

        </div>
      </ng-container>
    </div>

  </div>
  <div style="margin-left: 10px;">
    <i *ngIf="dataChangeLog" class="iconfont icon-file-list-2-line icon-data-change" nz-popover
      [nzPopoverContent]="contentTemplate"></i>
  </div>
</ng-template>

<ng-template #contentTemplate>
  <div class="popover-content">
    <div>近期更正</div>
    <div>更正时间：{{dataChangeLog.time | date: 'yyyy年MM月dd日 HH:mm'}}</div>
    <div>更正内容：由“<span class="font-red">{{getChangeLogSource()}}</span>”更正为“<span
        class="font-bule">{{getChangeLogTarget()}}</span>”
    </div>
  </div>
</ng-template>
